<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<style>
</style>
<body>
<!-- 容器 -->
<div id="root">
    <form>
        <label for="name">账号:</label>
        <input type="number" id="name" v-model.number="account"><br><br>
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="password"><br>
        男<input type="radio" name="sex" v-model="sex" value="male">
        女<input type="radio" name="sex" v-model="sex" value="female"><br>
        爱好：
        篮球<input type="checkbox" value="篮球" v-model="hobby">
        骑行<input type="checkbox" value="骑行" v-model="hobby">
        羽毛球<input type="checkbox" value="羽毛球" v-model="hobby">
        <br>
        <select v-model="school">
            <option value="">请选择校区</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="深圳">深圳</option>
        </select>
        <br>
        其他信息：
        <textarea v-model.lazy="other">

        </textarea>
        <br>
        <input type="checkbox" v-model="agree">是否同意协议<br>
        <button type="submit">提交</button>
    </form>

</div>
<script type="text/javascript">
    const vm=new Vue({
        el: '#root',
        data:{
            account:'',
            password:'',
            sex:'female',
            hobby:[],
            school:'',
            other:'',
            agree:false
        }
    })
</script>
</body>
</html>